<template>
  <div style="padding: 20px 20px">
    <a-form-model
      ref="form"
      v-bind="layout"
      :model="model"
      :rules="validatorRules"
    >
      <a-form-model-item label="任务名称" required prop="taskName">
        <a-input
          v-model="model.taskName"
          :disabled="roleDisabled"
          placeholder="请输入核算任务名称"
        />
      </a-form-model-item>
      <a-form-model-item label="填报周期" required prop="fillingCycle">
        <a-radio-group v-model="model.fillingCycle">
          <a-radio :value="1">年</a-radio>
          <a-radio :value="2">月</a-radio>
          <a-radio :value="3">自定义时间</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <!-- 如果是自定义 -->
      <a-form-model-item label="时间" prop="fillingTime">
        <div v-if="model.fillingCycle == 1">
          <a-date-picker
            mode="year"
            :open="yearShowOne"
            placeholder="选择年"
            format="YYYY"
            value-format="yyyy"
            v-model="model.fillingTime"
            @openChange="openChangeOne"
            @panelChange="panelChangeOne"
          />
        </div>
        <div v-else-if="model.fillingCycle == 2">
          <a-month-picker
            @change="onChange"
            v-model="model.fillingTime"
            value-format="yyyy-MM"
            placeholder="选择月份"
          />
        </div>
        <div v-else>
          <a-range-picker
            v-model="model.fillingTime"
            value-format="yyyy-MM-DD "
          />
        </div>
      </a-form-model-item>

      <a-form-model-item label="核算标准" required prop="standardType">
        <a-radio-group v-model="model.standardType">
          <a-radio value="1">国家发改委核算标准</a-radio>
          <a-radio value="2">GHG</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <div v-if="model.standardType == 1">
        <a-form-model-item label="发改委核算标准" prop="industryId">
          <j-dict-select-tag
            type="list"
            dictCode="hylt_accounting_industry,standard_name,id"
            placeholder="请选择核算标准"
            v-model="model.industryId"
          />
        </a-form-model-item>
      </div>
      <a-form-model-item label="任务描述" prop="description">
        <a-textarea
          :rows="5"
          v-model="model.description"
          placeholder="请输入任务描述"
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>


<script>
import moment from "moment";
import { addTask, duplicateCheck } from "@/api/api";
export default {
  name: "RoleModal",
  components: {},
  data() {
    return {
      year: null,
      month: null,
      custom: null,
      yearShowOne: false,
      addForm: {
        all_plan_one: null, //开始年限
      },
      dateFormat: "",
      dateFormatList: ["DD/MM/YY"],
      title: "操作",
      visible: false,
      roleDisabled: false,
      model: { fillingCycle: 1, standardType: "1", fillingTime: "" },
      layout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 14 },
      },
      confirmLoading: false,
      validatorRules: {
        fillingTime: [{ required: true, message: "请选择时间!" }],
        fillingCycle: [{ required: true, message: "请选择填报周期!" }],
        date: [{ required: true, message: "请选择时间!" }],
        standardType: [{ required: true, message: "请选择核算标准!" }],
        industryId: [{ required: true, message: "请选择核算标准!" }],
        taskName: [
          { required: true, message: "请输入任务名称!" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
          { validator: this.validateTaskName },
        ],

        description: [
          {
            min: 0,
            max: 126,
            message: "长度不超过 126 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  watch: {
    "model.fillingCycle"(val) {
      //   console.log(val);
      this.model.fillingTime = "";
    },
  },
  methods: {
    moment,

    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.model.fillingTime = moment(value).format("YYYY");
      this.yearShowOne = false;
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    },

    add() {
      this.edit(this.modelDefault);
    },

    close() {
      this.$refs.form.clearValidate();
      this.$emit("close");
      this.visible = false;
    },
    validateTaskName(rule, value, callback) {
      var params = {
        tableName: "hylt_accounting_task",
        fieldName: "task_name",
        fieldVal: value,
        dataId: "e9ca23d68d884d4ebb19d07889727dae",
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("任务名已存在!");
        }
      });
    },
    handleOk(func) {
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        func(valid);
      });
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/css/scrollbar.scss";
@import "@/assets/css/newrModule.scss";
</style>